<template>
  <t-global-setting lang="en">
    <header>
      <div class="inner">
        <div class="logo z10"></div>
        <nav class="z10" ref="navDom">
          <div class="pr40" @click="visible=true">语言</div>
          <div class="nav-icon" :class="{ close: navOpen }" @click="navOpen = !navOpen">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <ul :class="{ ac: navOpen }" :style="{ '--len': `${0.02 * 10 + 0.3}s` }">
            <li
              v-for="(item, index) in navList"
              :key="String(item.link) + index"
              :class="{ac: $route.path === item.link}"
              :style="{ '--i': `${0.02 * index}s` }"
            >
              <div class="link" @click="handleRoute(item)">
                {{ item.name }}
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="router-view">
      <RouterView />
    </div>
  </t-global-setting>
  <t-picker v-model="locale" v-model:visible="visible" :data="data" />
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useChangeI18nHook } from '@/base/language'

const router = useRouter()
const { locale } = useChangeI18nHook()
// 显示/隐藏 导航
const navOpen = ref<boolean>(false)
const visible = ref<boolean>(false)
// 导航Dom
const navDom = ref<HTMLElement>()
// 导航数据
const navList = computed(() => {
  return [
    { name: 'button', link: '/button' },
    { name: 'input', link: '/input' },
    { name: 'loading', link: '/loading' },
    { name: 'message', link: '/message' },
    { name: 'modal', link: '/modal' },
    { name: 'popup', link: '/popup' },
    { name: 'tabs', link: '/tabs' },
    { name: 'picker', link: '/picker' },
    { name: 'countdown', link: '/countdown' },
    { name: 'copy', link: '/copy' },
    { name: 'step', link: '/step' },
    { name: 'image', link: '/image' },
    { name: 'more', link: '/more' }
  ]
})
const data = reactive([
  { text: '英文', value: 'en' },
  { text: '简体', value: 'zh' },
  { text: '繁体', value: 'zht' },
  { text: '日文', value: 'ja' },
  { text: '韩文', value: 'ko' },
  { text: '俄文', value: 'py' }
])

// 路由
const handleRoute = async (navData: any): Promise<void> => {
  await router.push(navData.link)
  navOpen.value = false
}
</script>

<style scoped lang="scss">
.router-view {
  padding: 100rem 20rem 20rem 20rem;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
}

header {
  width: 100vw;
  height: 100rem;
  position: fixed;
  z-index: 500;
  background-color: #fff;

  .inner {
    padding: 0 30rem;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      width: 35rem;
      height: 35rem;
      background: url("@/assets/logo.png") no-repeat center center / contain;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav-icon {
        width: 30rem;
        min-width: 38rem;
        height: 30rem;
        position: relative;

        &.close {
          span {
            &:nth-of-type(1) {
              top: 50%;
              transform: translateY(-50%) rotate(45deg);
            }

            &:nth-of-type(2) {
              opacity: 0;
            }

            &:nth-of-type(3) {
              top: 50%;
              transform: translateY(-50%) rotate(-45deg);
            }
          }
        }

        > span {
          transform-origin: center center;
          transition: transform 0.3s;
          position: absolute;
          display: inline-block;
          width: 38rem;
          min-width: 38rem;
          height: 6rem;
          border-radius: 3rem;
          background-color: #000;
          left: 0;

          &:nth-of-type(1) {
            top: 0;
          }

          &:nth-of-type(2) {
            top: 50%;
            transform: translateY(-50%);
          }

          &:nth-of-type(3) {
            bottom: 0;
          }
        }
      }

      ul {
        position: fixed;
        right: 0;
        top: 100rem;
        width: 462rem;
        height: calc(100vh - 100rem);
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: all 0s,
        transform 0s var(--len);
        overflow-y: auto;

        &.ac {
          transition: all 0.1s var(--len),
          transform 0s;
          transform: translateX(0);
          box-shadow: 0 60rem 30rem 0 rgba(0, 0, 0, 0.5);

          li {
            transform: translateX(0);
          }
        }

        li {
          background-color: #fff;
          width: 100%;
          height: 90rem;
          transform: translateX(100%);
          transition: all 0.3s var(--i);

          &:last-of-type {
            height: 100%;
          }

          &.ac {
            color: #2db7f5;
          }

          > .link {
            box-sizing: border-box;
            padding-left: 50rem;
            width: 100%;
            height: 90rem;
            display: flex;
            align-items: center;
            font-size: 32rem;
            letter-spacing: 0;

            &.ac {
              color: var(--theme-color);
            }

            .icon {
              width: 32rem;
              height: 32rem;
              margin-right: 25rem;
            }
          }
        }
      }
    }
  }
}
</style>
